// 用于存储JS的工具函数
// 函数封装： 遵循小而美的原则
// 1.使用方便，灵活复用  2.实现功能的函数代码简洁  3.函数的性能
// 心法： 复用封函数，变化改参数

/**
 * @description 通过指定选择器获取对应的函数节点
 * @param { string } selector 选择器
 * @returns 函数节点
 */

// 方法二: 使用一个多功能的获取节点方法,大神级写法
function $(selector) {
	let nodeList = document.querySelectorAll(selector);
	if (nodeList.length === 0) {
		return console.warn(`${selector} 没有获取到节点`);
	}
	if (nodeList.length === 1) {
		return nodeList[0];
	}
	if (nodeList.length > 1) {
		return nodeList;
	}
}

/**
 * @description 				给节点中的文字添加鼠标移入、移出颜色
 * @param {Node} node			节点
 * @param {color} overColor		鼠标移入字体颜色
 * @param {color} outColor		鼠标移出字体颜色
 * @param {color} bgoverColor   鼠标移入背景颜色
 * @param {color} bgoutColor   	鼠标移出背景颜色
 */

//鼠标移入移出时,改变字体、背景颜色
function mousecolor(node, overColor, outColor, bgoverColor, bgoutColor) {
	//元素是一个
	// console.log(node);
	// 声明一个空数组
	let arr = [];
	if (node.length == undefined) {
		// 当为单个元素节点时,将元素节点push进入空数组
		arr.push(node);
	} else if (node.length >= 1) {
		arr = node;
	}
	// console.log("arr>>>", arr);
	arr.forEach(function (v) {
		v.addEventListener("mouseover", function () {
			v.style.color = overColor;
			v.style.backgroundColor = bgoverColor;
		});
		v.addEventListener("mouseout", function () {
			v.style.color = outColor;
			v.style.backgroundColor = bgoutColor;
		});
	});
}


// tab动态渲染
function tabChange(tabSelector, tabClassName, contSelector, contClassName) {
	$(tabSelector).forEach(function (v, i) {
		v.addEventListener("click", function () {
			$(tabSelector).forEach(function (item, index) {
				item.classList.remove(tabClassName);
				if (contSelector) {
					$(contSelector)[index].classList.remove(contClassName);
				}
			});
			v.classList.add(tabClassName);
			if (contSelector) {
				$(contSelector)[i].classList.add(contClassName);
			}
		});
	});
}
